<!--
 * @Author: zanjiahao
 * @LastEditors: zanjiahao
 * @Description: 文字线条显示动效
-->
<template>
  <div style="width: 100%">
    <div class="container">
      <ModuleTitle title="文字线条显示动效" />
      <div class="content" ref="conetentRef">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="188"
          height="70"
          viewBox="0 0 188 70"
          fill="none"
        >
          <path
            id="S"
            style="stroke: #ffffff; stroke-width: 1; stroke-opacity: 1; stroke-dasharray: 0 0"
            transform="translate(0.000005917968763924364 -0.0000015258789005656581)  rotate(0 26.424405 38.95)"
            d="M21.64,67.18C19.88,66.77 18.16,66.18 16.47,65.4C14.81,64.64 13.22,63.72 11.71,62.63C10.22,61.55 8.84,60.35 7.58,59.01L6.81,58.21L0,66.13L0.63,66.79C2.26,68.5 4.04,70.04 5.97,71.39C7.93,72.77 10.01,73.94 12.21,74.89C14.47,75.87 16.81,76.62 19.24,77.12C21.75,77.64 24.32,77.9 26.95,77.9C30.8,77.9 34.36,77.34 37.62,76.23C40.76,75.15 43.48,73.61 45.79,71.61C48.06,69.63 49.81,67.31 51.02,64.66C52.24,61.99 52.85,59.14 52.85,56.1C52.85,53.35 52.44,50.85 51.62,48.62C50.86,46.53 49.73,44.63 48.24,42.94C46.9,41.42 45.23,40.02 43.23,38.75C41.54,37.67 39.52,36.61 37.15,35.58L26.75,31.08L26.73,31.08L26.73,31.08L26.73,31.07L26.72,31.07L26.72,31.07L26.72,31.07L26.71,31.07L26.71,31.07L26.7,31.06L26.7,31.06L26.69,31.06L26.68,31.06L26.68,31.05L26.68,31.05L26.67,31.05L26.67,31.05L26.65,31.04C25.7,30.64 24.99,30.34 24.51,30.13C23.73,29.78 23.03,29.46 22.42,29.15C20.91,28.4 19.68,27.63 18.7,26.84C17.56,25.92 16.71,24.92 16.13,23.83C15.47,22.61 15.15,21.23 15.15,19.7C15.15,18.25 15.44,16.93 16.02,15.74C16.59,14.58 17.41,13.59 18.5,12.76C19.6,11.9 20.93,11.25 22.49,10.8C24.1,10.33 25.89,10.1 27.85,10.1C30.99,10.1 33.93,10.68 36.67,11.85C39.2,12.92 41.6,14.52 43.87,16.63L44.65,17.36L50.68,9.94L50.07,9.31C48.73,7.92 47.25,6.66 45.63,5.54C43.97,4.39 42.21,3.41 40.35,2.6C38.42,1.76 36.43,1.12 34.37,0.68C32.22,0.23 30.05,0 27.85,0C24.46,0 21.28,0.5 18.31,1.49C15.4,2.47 12.85,3.87 10.67,5.7C8.47,7.54 6.77,9.69 5.59,12.17C4.36,14.72 3.75,17.47 3.75,20.4C3.75,25.48 5.47,29.81 8.93,33.42C10.31,34.86 11.98,36.19 13.93,37.39C15.49,38.36 17.27,39.27 19.26,40.12L29.75,44.72C30.86,45.21 31.7,45.59 32.27,45.85C33.15,46.26 33.91,46.63 34.56,46.97C36.1,47.78 37.34,48.6 38.26,49.41C39.31,50.33 40.09,51.36 40.6,52.49C41.17,53.75 41.45,55.22 41.45,56.9C41.45,58.52 41.13,60 40.5,61.33C39.88,62.64 38.97,63.78 37.77,64.73C36.53,65.71 35.03,66.46 33.26,66.98C31.41,67.53 29.34,67.8 27.05,67.8C25.25,67.8 23.45,67.59 21.64,67.18Z M6.85,59.7L6.19,60.46L1.35,66.1C7.65,72.7 16.55,76.9 26.95,76.9C42.25,76.9 51.85,67.7 51.85,56.1C51.85,45.2 45.25,40.2 36.75,36.5L26.35,32C20.65,29.6 14.15,26.9 14.15,19.7C14.15,13.2 19.55,9.1 27.85,9.1C34.28,9.1 39.46,11.42 43.81,15.23C44.06,15.45 44.3,15.67 44.55,15.9L45.18,15.12L49.35,10C44.25,4.7 36.55,1 27.85,1C14.55,1 4.75,9.1 4.75,20.4C4.75,31.1 12.85,36.3 19.65,39.2L30.15,43.8C37.15,46.9 42.45,49.3 42.45,56.9C42.45,64 36.75,68.8 27.05,68.8C19.78,68.8 12.7,65.51 7.55,60.42C7.31,60.18 7.08,59.94 6.85,59.7Z "
          />
          <path
            id="V"
            style="stroke: #ffffff; stroke-width: 1; stroke-opacity: 1; stroke-dasharray: 0 0"
            transform="translate(-0.000004583984377859451 0)  rotate(0 30.068078 37.65)"
            d="M1.37,1L1.69,2L24.77,74.3L35.47,74.3L58.45,2L58.77,1L49.37,1L37.57,40.7C35.17,48.96 33.41,55.74 30.8,63.88C30.7,64.17 30.61,64.47 30.51,64.76C30.5,64.81 30.48,64.85 30.47,64.9L30.07,64.9C30.05,64.85 30.04,64.8 30.02,64.76C29.93,64.46 29.84,64.17 29.75,63.88C27.22,55.74 25.37,48.96 22.97,40.7L11.07,1L1.37,1Z M11.81,0L0,0L24.04,75.3L36.2,75.3L60.14,0L48.62,0L36.61,40.42C36.09,42.21 35.36,44.78 34.42,48.11C33.41,51.69 32.64,54.38 32.11,56.18C31.5,58.28 30.89,60.29 30.28,62.21C29.67,60.22 29.04,58.14 28.41,55.97C27.86,54.12 27.07,51.35 26.02,47.68C25.11,44.53 24.42,42.11 23.93,40.42L11.81,0Z "
          />
          <path
            id="G"
            style="stroke: #ffffff; stroke-width: 1; stroke-opacity: 1; stroke-dasharray: 0 0"
            transform="translate(-0.000006103515630684342 -0.0000015258788721439487)  rotate(0 27.85 37.949999999999996)"
            d="M33.6,0C14.2,0 0,14.3 0,38C0,61.8 13.8,75.9 33.1,75.9C42.9,75.9 51,72.3 55.7,67.4L55.7,36.6L31.6,36.6L31.6,44.3L47.2,44.3L47.2,63.5C44.3,66.2 39.2,67.8 34,67.8C18.3,67.8 9.5,56.2 9.5,37.7C9.5,19.4 19.1,8.1 33.9,8.1C41.2,8.1 46,11.2 49.7,15L54.7,9C50.5,4.6 43.8,0 33.6,0Z "
          />
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ModuleTitle from './ModuleTitle.vue'
import { ref } from 'vue'

const conetentRef = ref<HTMLDivElement | null>(null)
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 380px;
  display: flex;
  justify-content: center;
  padding-top: 60px;
  position: relative;

  $pathLength1: 676;
  $pathLength2: 640;
  $pathLength3: 387;
  $animationTime: 6s;

  .content {
    svg {
      width: 400px;
      height: 260px;
      animation: fill-anm $animationTime ease forwards infinite;

      path:nth-child(1) {
        stroke-dasharray: $pathLength1 !important;
        stroke-dashoffset: $pathLength1;
        animation: line-anm1 $animationTime ease-in-out infinite;
      }

      path:nth-child(2) {
        stroke-dasharray: $pathLength2 !important;
        stroke-dashoffset: $pathLength2;
        transform: translateX(60px);
        animation: line-anm2 $animationTime ease-in-out infinite 100ms;
      }

      path:nth-child(3) {
        stroke-dasharray: $pathLength3 !important;
        stroke-dashoffset: $pathLength3;
        transform: translateX(126px);
        animation: line-anm3 $animationTime ease-in-out infinite 200ms;
      }
    }
  }

  @keyframes line-anm1 {
    0%,
    5% {
      stroke-dashoffset: $pathLength1;
    }

    35% {
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dashoffset: 0;
    }

    60% {
      stroke-dashoffset: 0;
    }

    95%,
    100% {
      stroke-dashoffset: $pathLength1;
    }
  }

  @keyframes line-anm2 {
    0%,
    5% {
      stroke-dashoffset: $pathLength2;
    }

    35% {
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dashoffset: 0;
    }

    65% {
      stroke-dashoffset: 0;
    }

    95%,
    100% {
      stroke-dashoffset: $pathLength2;
    }
  }

  @keyframes line-anm3 {
    0%,
    5% {
      stroke-dashoffset: $pathLength3;
    }

    35% {
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dashoffset: 0;
    }

    65% {
      stroke-dashoffset: 0;
    }

    95%,
    100% {
      stroke-dashoffset: $pathLength3;
    }
  }

  @keyframes fill-anm {
    0% {
      fill: transparent;
    }

    35% {
      fill: transparent;
    }

    50% {
      fill: #fff;
    }

    65% {
      fill: transparent;
    }

    100% {
      fill: transparent;
    }
  }
}
</style>
